<template>
  <div :class="className" :style="{height:height,width:width}" />
</template>

<script>
import echarts from 'echarts'
require('echarts/theme/macarons') // echarts theme
import resize from '../../../../dashboard/mixins/resize'

const animationDuration = 6000

export default {
  mixins: [resize],
  props: {
    className: {
      type: String,
      default: 'chart'
    },
    width: {
      type: String,
      default: '100%'
    },
    height: {
      type: String,
      default: '300px'
    }
  },
  data() {
    return {
      chart: null,
      color: ['#006edd', '#334b5c', '#d48265', '#d53a35', '#61a0a8'],
      state1: ['运行', '待机', '停机', '报警', '调试'],
      data: [
        {
          itemStyle: { normal: { color: '#006edd' } },//条形颜色
          name: '运行',
          value: [1, '2009/6/1 2:00', '2009/6/1 24:00']//0,1,2代表y轴的索引，后两位代表x轴数据开始和结束
        },
        {
          itemStyle: { normal: { color: '#d53a35' } },
          name: '报警',
          value: [2, '2009/6/1 24:00', '2009/6/2 12:00']
        },
        {
          itemStyle: { normal: { color: '#006edd' } },
          name: '运行',
          value: [3, '2009/6/2 12:00', '2009/6/4 4:00']
        },
        {
          itemStyle: { normal: { color: '#006edd' } },
          name: '运行',
          value: [1, '2009/6/4 4:00', '2009/6/6 12:00']
        },
        {
          itemStyle: { normal: { color: '#006edd' } },
          name: '运行',
          value: [1, '2009/6/6 12:00', '2009/6/8 22:00']
        },
        {
          itemStyle: { normal: { color: '#d53a35' } },
          name: '报警',
          value: [1, '2009/6/8 22:00', '2009/6/10 23:00']
        },
        {
          itemStyle: { normal: { color: '#d53a35' } },
          name: '报警',
          value: [1, '2009/6/10 23:00', '2009/6/11 23:00']
        },
        {
          itemStyle: { normal: { color: '#d53a35' } },
          name: '报警',
          value: [1, '2009/6/11 23:00', '2009/6/12 23:00']
        },
        {
          itemStyle: { normal: { color: '#d53a35' } },
          name: '报警',
          value: [1, '2009/6/12 23:00', '2009/6/13 23:00']
        },
        {
          itemStyle: { normal: { color: '#d53a35' } },
          name: '报警',
          value: [1, '2009/6/13 23:00', '2009/6/14 23:00']
        },
        {
          itemStyle: { normal: { color: '#d53a35' } },
          name: '报警',
          value: [1, '2009/6/14 23:00', '2009/6/15 23:00']
        },
      ]
    }
  },
  mounted() {
    this.$nextTick(() => {
      this.initChart()
    })
  },
  beforeDestroy() {
    if (!this.chart) {
      return
    }
    this.chart.dispose()
    this.chart = null
  },
  methods: {
    initChart() {
      this.chart = echarts.init(this.$el, 'macarons')

      this.chart.setOption({
        color: this.color,
        tooltip: {
          trigger: 'item',
          // formatter: '{b}: {c}',
          formatter: function(params){
            return params.name + ': ' + params.value[1]+ '-' + params.value[2]
          },
          axisPointer: {
            // Use axis to trigger tooltip
            type: 'none' // 'shadow' as default; can also be 'line' or 'shadow'
          },
        },
        legend: {
          data: this.state1,
        },
        grid: {
          left: '6%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        xAxis: {
          // type: 'time',
          // min: 1525837591000,
          // scale: true,
          // boundaryGap: false, //是否留白
          // axisLabel: { //轴文字标签
          //   show: true,
          //   textStyle: {
          //     color: '#999',
          //   }
          // },
          type: 'time',
          interval: 3600 * 24 * 1000,
          axisLabel: {
            formatter: function (value) {
              var date = new Date(value);
              return getzf((date.getMonth() + 1) + '/' + date.getDate() + ' ' + date.getHours()) + ':' + getzf(date.getMinutes());
              function getzf(num) { 
                if (parseInt(num) < 10) { 
                  num = '0' + num; 
                } 
                return num;
              } 
            },
            interval: 20,//20个点显示一个
            rotate: 35 //旋转角度
          },
          axisLine:{
            show: false,
            onZero: true, //刻度线是否在0刻度上
            lineStyle:{
              color:'#999',
              width:1,//这里是为了突出显示加上的
            }
          },
          axisTick:{
            show: false
          },
          splitLine :{
            show: false
          },
        },
        yAxis: {
          // type: 'category',
          data: ['出料机状态'],
          show: false,
          axisLabel: { //轴文字标签
            show: false,
            textStyle: {
              color: '#999',
            },
          }
        },
        series: [
          {
            name: '运行',
            type: 'bar',
            data: []
          },
          {
            name: '待机',
            type: 'bar',
            data: []
          },
          {
            name: '停机',
            type: 'bar',
            data: []
          },
          {
            name: '报警',
            type: 'bar',
            data: []
          },
          {
            name: '调试',
            type: 'bar',
            data: []
          },
          {
            type: 'custom',
            renderItem: this.renderItem,
            itemStyle: {
              normal: {
                opacity: 0.8,
              },
            },
            encode: {
              x: [1, 2], // data 中『维度1』和『维度2』对应到 X 轴
              y: 0// data 中『维度0』对应到 Y 轴
            },
            data: this.data,
          },
        ]
      })
    },
    renderItem(params, api) {
      var categoryIndex = api.value(0);//这里使用 api.value(0) 取出当前 dataItem 中第一个维度的数值。
      var start = api.coord([api.value(1), categoryIndex]); // 这里使用 api.coord(...) 将数值在当前坐标系中转换成为屏幕上的点的像素值。
      var end = api.coord([api.value(2), categoryIndex]);
      var height = 10;//柱体宽度

      return {
        type: 'rect',// 表示这个图形元素是矩形。还可以是 'circle', 'sector', 'polygon' 等等。
        shape: echarts.graphic.clipRectByRect({ // 矩形的位置和大小。
          x: start[0],
          y: start[1] - height / 2,
          width: end[0] - start[0],
          height: height
        }, { // 当前坐标系的包围盒。
          x: params.coordSys.x,
          y: params.coordSys.y,
          width: params.coordSys.width,
          height: params.coordSys.height
        }),
        style: api.style()
      };
    }
  }
}
</script>
